<template>
    <div class="conter-div-nr">
      <!-- :style="{width:offsetWidth+'px'}" -->
      <div class="curriculum-div" :class="{ 'mobile_view-div': isMobileView }" ref="aaaa">
        <el-tabs v-model="active" @tab-click="handleClick" class="tab-div">
          <el-tab-pane  v-for="(item,index) in tabList" :key="index" :label="item.label">{{item.name}}</el-tab-pane>
          <!-- <el-tab-pane label="课程评价" name="first">课程评价</el-tab-pane>
          <el-tab-pane label="课程评论" name="second">课程评论</el-tab-pane> -->
        </el-tabs>
        <div v-if="this.active == 0" class="con-div">
          <div class="title">讲师介绍</div>
          <div class="region-div">
            <div class="dis-play pos">
              <img src="../assets/tx.png" alt="" class="img-tx">
              <div class="name-div">王小明</div>
            </div>
            <div class="text">讲师介绍讲师介绍讲师介绍讲师介绍讲师介绍讲师介绍讲师介绍讲师介绍讲师介绍讲师介绍讲师介绍讲师介绍讲师介绍</div>
          </div>
          <div class="title" style="margin-top:20px">课程详情</div>
            <div class="detail">
              <div class="first-detail">产品能力作为公司竞争力的核心，掌握组织不同发展阶段的产品管理抓手，运用专业知识构建适配公司的IPD管理体系显得极为重要 </div>
              <div>结合公司长期发展战略，大自然商学院于8月正式启动产品致胜特战营，致力于帮助训战营成员深入理解核心概念，学习IPD落地全过程.掌握IPD的核心框架&内涵，通过案例得到练习，树立经营与管理并重的思想意识，全面提升产品研发能力和管理水平。</div>
            </div>
        </div>
        <div v-if="this.active == 1" class="con-div">
         <div v-for="(item,index) in list" :key="index" class="tab-two-div">
            <div class="comment" style="display: flex;">
                <img :src=item.url alt="" class="img-tx-pl">
                <div style="width: 100%;">
                  <div class="right-div">
                    <div class="name-div-pl">{{item.name}}</div>
                    <div class="time">{{item.time}}</div>
                    <div>{{item.content}}</div>
                  </div>
                  <el-divider></el-divider>
                </div>
            </div>
         </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'HelloWorld',
    props: {
      offsetWidth: Number,
      list1:{
        type:Array,
      }
    },
    data(){
      return{
        isMobileView: false, // 用于标记当前是否为移动视图
        videoUrl:'http://txvideo.aijiayou.com/e0e86d1fvodgzp1252425236/97531f935576678019782313439/DhQnQyAkTXoA.mp4',
        active:0,
        tabList:[
          {
            label:'课程评价',
            active:0
          },
          {
            label:'课程评论',
            active:1
          },
        ],
        list:[
          {
            url:require('../assets/tx.png'),
            name:'我是昵称',
            time:'三分钟前',
            content:'这是一段很长很长的评论这是一段很长很长的评论这是一段很长很长的评论这是一段很长很长的评论这是一段很长很长的评论这是一段很长很长的评论'
          },
          {
            url:require('../assets/tx.png'),
            name:'我是昵称',
            time:'2024-01-31',
            content:'这是一段很长很长的评论这是一段很长很长的评论这是一段很长很长的评论这是一段很长很长的评论这是一段很长很长的评论这是一段很长很长的评论'
          },
        ]
      }
    },
    created(){
       this.tabList[1].label=`课程评论(${this.list.length})`
    },
    methods:{
      handleClick() {
        // console.log(this.active);
      },
      add(item){
        console.log(item);
        this.list.push(item)
        this.tabList[1].label=`课程评论(${this.list.length})`
      },
    }
  }
  </script>
  
  <style scoped lang="less">
  .conter-div-nr{
    .dis-play{
      display: flex;
      align-items: center;
    }
    @media screen and (max-width: 500px) {
    .curriculum-div{
      width: 90% !important;
      margin-top: 0px !important;
      border-radius:0px !important;
    }
   }
    .curriculum-div{
      background-color: #fff;
      border-radius: 30px 30px 0 0;
      margin-top: 10px;
      padding: 15px 20px;
      width: 58%;
      margin: 0 auto;
      .tab-div{
        ::v-deep{
          .el-tabs__item:hover{
            color: #000;
          }
          .el-tabs__item.is-active {
              color: #DD685F;
          }
          .el-tabs__active-bar{
            background-color: #DD685F;
          }
        }
      }
      .con-div{
        color: #000;
        .tab-two-div{
          margin-top: 10px;
        }
        .title{
          font-weight: bold;
        }
        .region-div{
          background-color: #FBEBEA;
          padding: 15px 20px;
          border-radius: 10px;
          margin-top: 20px;
          .pos{
            position: relative;
            bottom: 24px;
          }
            .img-tx{
              border-radius: 50%;
              width: 50px;
            .name-div{
              margin-left: 6px;
            }
          }
          .text{
            margin-top: -10px;
            color: #B5ADAC;
          }
        }
        .detail{
          background: #F6F7F9;
          padding: 15px 20px;
          border-radius: 10px;
          margin-top: 20px;
          text-indent:24px;
          .first-detail{
            margin-bottom: 8px;
          }
        }
          .comment{
            .img-tx-pl{
              border-radius: 50%;
              width: 50px;
              height: 50px;
            }
            .right-div{
              margin-left: 6px;
              width: 100%;
              .name-div-pl{
                font-weight: bold;
              }
              .time{
                font-size: 14px;
                color: #B5ADAC;
              }
            } 
          }
      }
    }
  }
  </style>
  